{% extends "admin/change_form.html" %}
 
{% block extrahead %}
    {{ block.super }}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{% endblock %}
 
{% block field_sets %}
    {{ block.super }}
    <fieldset>
        <legend></legend>
        {% if image_preview_url %}
            <img id="image-preview" src="{{ image_preview_url }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url2 %}
            <img id="image-preview2" src="{{ image_preview_url2 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url3 %}
            <img id="image-preview3" src="{{ image_preview_url3 }}" alt="预览" width="16%" />
        {% endif %} 
        {% if image_preview_url4 %}
            <img id="image-preview4" src="{{ image_preview_url4 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url5 %}
            <img id="image-preview5" src="{{ image_preview_url5 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url6 %}
            <img id="image-preview6" src="{{ image_preview_url6 }}" alt="预览" width="16%" />
        {% endif %}
 
        <br>
 
        {% if image_preview_url7 %}
            <img id="image-preview7" src="{{ image_preview_url7 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url8 %}
            <img id="image-preview8" src="{{ image_preview_url8 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url9 %}
            <img id="image-preview9" src="{{ image_preview_url9 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url10 %}
            <img id="image-preview10" src="{{ image_preview_url10 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url11 %}
            <img id="image-preview11" src="{{ image_preview_url11 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url12 %}
            <img id="image-preview12" src="{{ image_preview_url12 }}" alt="预览" width="16%" />
        {% endif %}
 
    </fieldset>
{% endblock %}
 
{% block extrajs %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            // 监听图片文件选择事件
            $('input[name="image"]').change(function() {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#image-preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });
        });
    </script>
{% endblock %}